<template>
    <div class="taocan-wrap">
        <i @click="goBack" class="el-icon-arrow-left"></i>
        <ul class="TaocanList" v-if="this.userMealListData.length > 0">
            <li v-for="taocanlist in this.userMealListData" :key="taocanlist.id">
                <div style="display:flex;" class="clearfix">
                    <div class="taocanimg">
                        <img v-if="taocanlist.image" :src="taocanlist.image[0]" alt="">
                    </div>
                    <div class="taocantxt">
                        <h3>{{ taocanlist.name }}</h3>
                        <p>{{ taocanlist.detail }}</p>  
                        <!-- <p v-if="taocanlist.hours != 0" style="color:#FF5722; font-size:70%">(购买时间:{{ taocanlist.hours }}小时)</p>                 -->
                    </div>
                </div>
                <div class="num">x{{ taocanlist.cleaningTimes }}</div>
                <div class="link">
                    <a @click="use(taocanlist)">立即使用</a>
                </div>
            </li>
        </ul>
        <ul class="TaocanList" v-else>
            <li style="justify-content: center;">
                <div class="clearfix">
                    <div class="taocantxt" style="width:100%;text-align:center;">
                            <h3 style="color:#ccc">您暂时还未购买任何套餐。</h3>      
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
    created(){
        this.getUserMealListData();
    },
    computed:{
        ...mapState({
            userMealListData:state => state.baojieModules.userMealListData,
        })
    },
    methods:{
        ...mapActions({
            getUserMealListData:"baojieModules/getUserMealListData"
        }),
        use(taocanlist){
            // return '/yuyue?itemId=' + itemId
            this.$router.push({path:'/yuyue',query:{itemId:taocanlist.itemId,hours:taocanlist.hours}})
        },
        goBack(){
            this.$router.go(-1);
        },
    }
}
</script>

<style lang="scss" scoped>
.el-icon-arrow-left{
        position: fixed;
    top: 10px;
    color: white;
    z-index: 9999;
    background-color: #888;
    border-radius: 50%;
    font-size: 25px;
    left: 10px;
}
.taocan-wrap{
    background: #F6F5F5;
    display: flex;
    flex-flow: column wrap;
    align-content: space-around;
    flex: auto;
}
.TaocanList{
    background: #F6F5F5;
    padding-bottom: 10px;
    li{
        background: #fff;
        border-top: 10px solid #F6F5F5;
        display: flex;
        align-items:center;
        padding: 10px 8px;
        .taocanimg{
            width: 32%;
            margin-right: 3%;
            float: left;
            img{
                width: 100%;
                display: block;
            }
        }
        .taocantxt{
            // flex: auto;
            float: right;
            width: 65%;
            position: relative;
            h3{
                font:400 16px/2 '';
                color:#333;
            }
            p{
                font:400 13px/1.2 '';
                color:#999;
                padding-bottom: 8px;
            }            
        }
        .num{
            font-size: 14px;
            color:#333;
            margin: 0 5%;
        }
        .link{
            >a{    
                background: #ff5622;
                border-radius: 15px;               
                color: #fff;
                font-size: 14px;
                display: flex;
                height: 28px;
                line-height: 28px;
                width: 72px;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>



